//useEffect可以处理卸载时的钩子函数


import React, {  useEffect, useState } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 在子组件中挂载时监听窗口改变事件
  //封装监听代码
  const resizeFn=() => { 
    console.log('123  ----->  ', 123);
   }
   //挂载时,开启监听
  useEffect(()=>{
    window.addEventListener('resize',resizeFn)


    //卸载时清除监听事件
    // 挂载时和卸载时,可以写在同一个useEffect中
    //逻辑复杂时拆开写
    //逻辑简单时合起来写
    return ()=>{
      //useEffect接收的回调函数中,返回一个函数,代表卸载时执行该函数
      console.log('我被触发卸载了  ----->  ');
      window.removeEventListener('resize',resizeFn)
    }
  },[])
  
  return <div>我是子组件</div>;
}